<template>
  <div id="app" class="all">
    <!-- 这里放a链接 -->
    <nav class="left">
      <!-- day37 -->
      <li class="day-01-li" @click="isShow">
        <a href="#" target="">vue三星</a>
      </li>
      <div ref="day-37-div" v-show="isShowStudy">
        <li>
          <router-link to="/Comp01">1.列表渲染</router-link>
        </li>
      </div>
    </nav>

    <!-- 3.保存缓存 方式1:include属性 -->
    <!-- include="Comp" -->
    <keep-alive>
      <router-view class="right" />
    </keep-alive>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowStudy: false,
      isShowStudy2: true,
    };
  },
  methods: {
    isShow() {
      this.isShowStudy = !this.isShowStudy;
    },
    isShow2() {
      this.isShowStudy2 = !this.isShowStudy2;
    },
  },
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
/*
    布局：用百分比布局(自适应尺寸)
    */
// 1.总容器
.all {
  // 总体内容100%
  width: 100%;
  display: flex;

  .left {
    // 左侧展示内容20%
    width: 20%;
    height: 100%;

    li {
      list-style: none;
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-radius: 8px;
      // 设置文本不可选中
      user-select: none;
      text-align: center;

      &:hover {
        background-color: #cfc;
      }
    }

    // 每日标题样式
    .everyday-title {
      color: hsl(236, 63%, 44%);
      font-weight: 700;
    }

    // 每日作业样式
    .everyday-work {
      color: hsl(236, 43%, 64%);
    }

    a {
      /* 取消下划线 */
      text-decoration: none;
      height: 100%;
    }
  }
}

.right {
  // 右侧展示内容79%
  font-size: 15px;
  width: 79%;
  height: 100%;

  .show {
    display: flex;
    justify-content: center;
  }
}
</style>
